<template>
    <div>
        <el-row style="margin-bottom: 9px;margin-left: 15px" :gutter="20">
            <el-col :span="6">
                <!--                <el-button size="small" type="primary" @click="dialogVisibleAdd=true">新增</el-button>-->
            </el-col>
        </el-row>
        <el-card>
            <template>
                <el-table
                        row-key="id"
                        size="mini"
                        default-expand-all
                        :data="commentList"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="评论id"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="userName"
                            label="评论人"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="blogTitle"
                            label="博客标题"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="parentCommentId"
                            label="父级评论id"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="parentCommentUserId"
                            label="父级评论人"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="formatTime"
                            label="创建时间">
                    </el-table-column>


                    <el-table-column label="操作">
                        <template style="display: flex" slot-scope="scope">
                            <!--                            <el-button-->
                            <!--                                    style="margin-right: 5px"-->
                            <!--                                    size="mini"-->
                            <!--                                    @click="showEdit(scope.row)">编辑-->
                            <!--                            </el-button>-->

                            <!--                                    <el-button>t</el-button>-->
                            <!--                            <el-popconfirm>1</el-popconfirm>-->
                            <!--                            <el-button-->
                            <!--                                    size="mini"-->
                            <!--                                    type="danger"-->
                            <!--                                    @click="handleDelete(scope.$index, scope.row)">删除-->
                            <!--                            </el-button>-->
                            <el-popconfirm
                                    @confirm="deleteComment(scope.row)"
                                    title="这是一段内容确定删除吗？"
                            >

                                <el-button
                                        type="danger"
                                        size="mini"
                                        @click="handleDelete(scope.$index, scope.row)"
                                        slot="reference">删除
                                </el-button>
                            </el-popconfirm>


                        </template>
                    </el-table-column>
                </el-table>
            </template>

        </el-card>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[1, 5, 10, 20]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>


    </div>
</template>

<script>
    import {formatDate} from '@/assets/js/Time';
    // import Global from "../../assets/js/Global";
    import Global from "../../../public/static/Global";

    export default {
        data() {
            return {
                commentList: [
                    {
                        name: "xxxxx",
                        type: "222"
                    }
                ],  // 分类数据
                // dialogVisibleAdd: false,
                // dialogVisibleEdit: false,
                // formAdd: {  // 添加对话框
                //     name: "",
                //     typeImg: "",
                //     description: ""
                //
                // },
                // formEdit: {  // 修改对话框
                //     name: "",
                //     typeImg: "",
                //     description: ""
                //
                // },
                srcList: [],  // 放大

                currentPage4: 1,  // 当前页
                size: 10, // 每页的个数
                fileList: [],
                total: 100,// 总条数
                // rulesAdd: {
                //     name: [
                //         {required: true, message: '请输入分类', trigger: 'blur'},
                //         {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                //     ],
                //     description: [
                //         {required: true, message: '请输入描述', trigger: 'blur'},
                //     ],
                //
                // },
                // rulesEdit: {
                //     name: [
                //         {required: true, message: '请输入分类', trigger: 'blur'},
                //         {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                //     ],
                //     description: [
                //         {required: true, message: '请输入描述', trigger: 'blur'},
                //     ],
                // }
            }
        },
        created() {
            // console.log('222')
            this.getCommentInfo();
        },
        methods: {
            async deleteComment(row) {
                let id = row.id;
                const {data: res} = await this.$http.delete('/admin/comment/' + id)
                if (res.meta.status === 200) {
                    this.$message.success('删除成功!')
                    this.getCommentInfo();
                } else {
                    this.$message.error(res.meta.msg);
                }

            },
            // showEdit(row) {  // 展开修改对话框
            //     this.dialogVisibleEdit = true;
            //     this.formEdit.name = row.name;
            //     let img = row.typeImg;
            //     let i = img.lastIndexOf('/')
            //     if (i > 0) {
            //         row.typeImg = img.substring(i + 1)
            //     }
            //     this.formEdit.description = row.description;
            //     this.formEdit.typeImg = row.typeImg;
            //     // this.formEdit.create
            //     this.formEdit.id = row.id;
            //     // this.$http.put('')
            // },
            async getCommentInfo() {  // 得到分类的信息
                const {data: res} = await this.$http.get('/admin/comment?index=' + this.currentPage4 + '&size=' + this.size,
                )
                console.log(res);
                // console.log("1111");
                // for (let i = 0; i < res.data.length; i++) {
                //     const time = res.data[i].createTime; // 获取的时间戳
                //     let date = new Date(time)
                //     const timeformat = formatDate(date, 'yyyy-MM-dd hh:mm') // 转成想要的格式
                //     res.data[i].createTime = timeformat; // 重新赋值
                //     // res.data.records[i].updateTime = timeformat; // 重新赋值
                //     // 图片路径的拼接
                //     // res.data.records[i].typeImg = Global.baseUrl + res.data.records[i].typeImg;
                //     // console.log(res.data[i].createTime);
                // }
                this.total = res.data.total;
                // console.log(res.data[7].typeImg);
                this.commentList = res.data;
            },
            // upload(response, file, fileList) { // 分类上传成功后的钩子
            //     console.log(response)
            //     console.log(file)
            //     this.formAdd.typeImg = response.data;  // 上传成功后的名字
            //     console.log(fileList);
            // },
            // uploadEdit(respose, file, fileList) {  // 编辑分类上传成功的钩子
            //     this.formEdit.typeImg = respose.data;  // 上传成功后的名字
            //     console.log(respose);
            // },
            // add(formAddRef) {  // 添加对话框里的确定
            //     // console.log(formAddRef);
            //     this.$refs[formAddRef].validate(async (valid) => { // 前端校验
            //             if (valid) {
            //                 const {data: res} = await this.$http.post('/admin/type', this.formAdd)
            //                 console.log(res);
            //                 if (res.meta.status == 200) {
            //                     this.$message({
            //                         type: 'success',
            //                         message: '添加成功'
            //                     })
            //                     this.dialogVisibleAdd = false;
            //                     this.getTypeInfo(); // 重新刷新数据
            //
            //                 } else {
            //                     this.$message({
            //                         type: 'error',
            //                         message: res.meta.msg
            //                     })
            //                     this.dialogVisibleAdd = false;
            //                 }
            //
            //             } else {
            //                 this.$message({
            //                     type: 'error',
            //                     message: '请检查！'
            //                 })
            //                 return false;
            //             }
            //         }
            //
            //     );
            //     // this.dialogVisibleAdd = true;
            //     this.$refs[formAddRef].resetFields();
            //
            // },
            clearAdd(formAddRef) {  // 清除添加对话框的校验效果/上次表单信息
                // console.log(formAddRef)
                // this.$nextTick(() => {
                //     this.$refs[formAddRef].resetFields();
                //
                // })
                this.formAdd = {};
                // console.log('22221321')
            },
            async Comment(row) {
                // console.log(row);
                // console.log(row.id)
                const {data: res} = await this.$http.delete('/admin/comment/' + row.id)
                console.log(res);
                if (res.meta.status === 200) {
                    this.$message.success('删除成功！')
                    this.getTypeInfo();
                } else {
                    this.$message.error(res.data.meta.msg);
                }
            },
            // async submitEdit() {  // 修改对话框确定按钮
            //     // console.log(row);
            //     const {data: res} = await this.$http.put('/admin/type', this.formEdit);
            //     console.log(res.meta.status);
            //     if (res.meta.status === 200) {
            //         this.$message.success("修改成功");
            //         this.getTypeInfo();
            //     } else {
            //         this.$message.error(res.meta.msg);
            //     }
            //     this.dialogVisibleEdit = false;
            // },
            handleSizeChange(size) { // 每页的个数
                this.size = size;
                this.getCommentInfo()

            },
            handleCurrentChange(index) {
                this.currentPage4 = index;
                this.getCommentInfo()

            } // 当前第几页
        }
    }
</script>


<style scoped>

</style>